<template>
  <!-- 车务管理 -->
  <div style="height:100%">
    <div class="public" @mouseenter="trafficManger = true" @mouseleave="trafficManger = false">
      <span>车务管理</span>
      <div class="work_area_list" v-if="trafficManger">
        <span @click="carManage">车辆基础信息</span>
        <span @click="opencjjl">车检记录</span>
        <span @click="opencxjl">车险记录</span>
        <span @click="openwxjl">维修记录</span>
        <span @click="openbyjl">保养记录</span>
        <span @click="openjyjl">加油记录</span>
        <span @click="openwzjl">违章记录</span>
        <span @click="openwgjl">违规记录</span>
        <span @click="openjsjl">加水记录</span>
      </div>
    </div>
    <!--车辆基础信息 -->
    <div class="organization carInformation" v-if="carInformation.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>车辆基础信息</span>
        <i class="iconfont icon-guanbi" @click="carInformation.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号码：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型:">
            <el-select v-model="person.client" placeholder="车辆类型">
              <el-option
                v-for="(item,index) in car.typeList"
                :key="index"
                :label="item"
                :value="item"
              />
              <!-- <el-option value="吸尘车" />
              <el-option value="小型机扫车" />
              <el-option value="机扫车" />
              <el-option value="洒水车" />
              <el-option value="洗路车" />
              <el-option value="高压清洗车" />
              <el-option value="除雪车" />
              <el-option value="挤压车" />
              <el-option value="垃圾车" />
              <el-option value="多功能车" />
              <el-option value="其他" />-->
            </el-select>
          </el-form-item>
          <el-form-item label="车况:">
            <el-select v-model="person.clientList" placeholder="车况">
              <el-option
                v-for="(item,index) in car.carCondition"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              记录数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 车辆基础信息列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column sortable fixed prop="ID" label="人员ID" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Dw" label="资产单位" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Cph" label="车牌号码" align="center"></el-table-column>
          <el-table-column sortable fixed prop="Model" label="车辆类型" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="当前保管人" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="购置日期" align="center" width="70"></el-table-column>
          <el-table-column sortable fixed prop="Explain" label="说明" align="center"></el-table-column>
          <el-table-column fixed prop="Usedeptname" label="使用部门" align="center" width="90"></el-table-column>
          <el-table-column sortable fixed prop="Vowner" label="机动车所有人" align="center"></el-table-column>
          <el-table-column fixed prop="Brand" label="品牌型号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vin" label="车架号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Enginenum" label="发动机号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Dischargerate" label="排气量" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Registertime" label="登记时间" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vcondition" label="车况" align="center" width="90"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 车检记录 -->
    <div class="organization carInformation" v-if="cjjl.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>车检基础信息列表</span>
        <i class="iconfont icon-guanbi" @click="cjjl.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号码：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="车检日期：">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item label="到">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              车检数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">车检登记</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 车辆基础信息列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column fixed prop="ID" label="车牌照号" align="center"></el-table-column>
          <el-table-column fixed prop="Dw" label="检车时间" align="center"></el-table-column>
          <el-table-column fixed prop="Cph" label="检车人" align="center"></el-table-column>
          <el-table-column fixed prop="Model" label="检车说明" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="车检状态" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="预计下次检车时间" align="center" width="150px"></el-table-column>
          <el-table-column fixed prop="Explain" label="车龄" align="center"></el-table-column>
          <el-table-column fixed prop="Usedeptname" label="检车费用" align="center"></el-table-column>
          <el-table-column fixed prop="Vowner" label="应检车时间" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 车险记录 -->
    <div class="organization carInformation" v-if="cxjl.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>车险基础信息列表</span>
        <i class="iconfont icon-guanbi" @click="cxjl.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号码：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="日期:">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item label="到：">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              车险数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 车辆基础信息列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column fixed prop="ID" label="车牌号码" align="center"></el-table-column>
          <el-table-column fixed prop="Dw" label="保险类型" align="center"></el-table-column>
          <el-table-column fixed prop="Cph" label="保险公司" align="center"></el-table-column>
          <el-table-column fixed prop="Model" label="保险说明" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="购买日期" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="失效日期" align="center"></el-table-column>
          <el-table-column fixed prop="Explain" label="保险价格" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 维修记录 -->
    <div class="organization carInformation" v-if="wxjl.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>维修记录信息列表</span>
        <i class="iconfont icon-guanbi" @click="wxjl.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号码：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="日期:">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item label="到：">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              维修记录：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 车辆基础信息列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column fixed prop="ID" label="维修时间" align="center"></el-table-column>
          <el-table-column fixed prop="Dw" label="维修人" align="center"></el-table-column>
          <el-table-column fixed prop="Cph" label="维修说明" align="center"></el-table-column>
          <el-table-column fixed prop="Model" label="维修附件路径" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="车牌号码" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="维修费用(保险)" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="维修费用(个人)" align="center"></el-table-column>
          <el-table-column fixed prop="Explain" label="维修类型" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 保养记录 -->
    <div class="organization carInformation" v-if="byjl.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>保养记录信息列表</span>
        <i class="iconfont icon-guanbi" @click="byjl.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号码：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="日期:">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item label="到：">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              保养记录：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 车辆基础信息列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column fixed prop="ID" label="车牌号" align="center"></el-table-column>
          <el-table-column fixed prop="Dw" label="实际保养时间" align="center"></el-table-column>
          <el-table-column fixed prop="Cph" label="实际保养里程" align="center"></el-table-column>
          <el-table-column fixed prop="Model" label="保养人" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="保养说明" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="状态" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="保养花费金额" align="center"></el-table-column>
          <el-table-column fixed prop="Explain" label="下次保养时间" align="center"></el-table-column>
          <el-table-column fixed prop="Explain" label="应保养时间" align="center"></el-table-column>
          <el-table-column fixed prop="Explain" label="下次保养里程" align="center"></el-table-column>
          <el-table-column fixed prop="Explain" label="应保养里程" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 加油记录 -->
    <div class="organization carInformation" v-if="jyjl.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>加油信息列表</span>
        <i class="iconfont icon-guanbi" @click="jyjl.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="时间:">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item label="到：">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              加油记录数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 记录列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column sortable fixed prop="ID" label="车牌号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Dw" label="加油时间" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Cph" label="加油人员" align="center"></el-table-column>
          <el-table-column fixed prop="Model" label="金额" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="备注" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="加油量" align="center" width="70"></el-table-column>
          <el-table-column fixed prop="Explain" label="加油地点" align="center"></el-table-column>
          <el-table-column fixed prop="Usedeptname" label="当前里程" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vowner" label="油卡号" align="center"></el-table-column>
          <el-table-column fixed prop="Brand" label="品牌型号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vin" label="附件" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Enginenum" label="附件名称" align="center" width="90"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 违章记录 -->
    <div class="organization carInformation" v-if="wzjl.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>违章记录信息列表</span>
        <i class="iconfont icon-guanbi" @click="wzjl.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="时间:">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item label="到：">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              违章记录数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 记录列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column sortable fixed prop="ID" label="序号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Dw" label="车辆ID" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Cph" label="车牌号" align="center"></el-table-column>
          <el-table-column sortable fixed prop="Model" label="违章类型" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="违章时间" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="违章扣分" align="center" width="70"></el-table-column>
          <el-table-column sortable fixed prop="Explain" label="违章罚款" align="center"></el-table-column>
          <el-table-column fixed prop="Usedeptname" label="违章地点" align="center" width="90"></el-table-column>
          <el-table-column sortable fixed prop="Vowner" label="司机ID" align="center"></el-table-column>
          <el-table-column fixed prop="Brand" label="司机姓名" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vin" label="违章录像地址" align="center" width="90"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 违规记录 -->
    <div class="organization carInformation" v-if="wgjl.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>违规记录</span>
        <i class="iconfont icon-guanbi" @click="wgjl.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="时间:">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item label="到：">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 记录列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column fixed prop="ID" label="车牌号" align="center" width="100"></el-table-column>
          <el-table-column fixed prop="Dw" label="违规人" align="center" width="100"></el-table-column>
          <el-table-column fixed prop="Cph" label="违规时间" align="center"></el-table-column>
          <el-table-column fixed prop="Model" label="违规地点" align="center" width="300"></el-table-column>
          <el-table-column fixed prop="Person" label="违规类型" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 加水记录 -->
    <div class="organization carInformation" v-if="jsjl.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>加水信息列表</span>
        <i class="iconfont icon-guanbi" @click="jsjl.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="时间:">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item label="到：">
            <el-input v-model="person.name" placeholder="日期"></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              加水记录数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 记录列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column fixed prop="ID" label="加水时间" align="center" width="100"></el-table-column>
          <el-table-column fixed prop="Dw" label="上传时间" align="center" width="100"></el-table-column>
          <el-table-column fixed prop="Cph" label="车牌号" align="center"></el-table-column>
          <el-table-column fixed prop="Model" label="加水量(吨)" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="加水地点" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="车辆类型" align="center"></el-table-column>
          <el-table-column fixed prop="Explain" label="加水人" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 车辆基础信息 -->
    <div class="organization carInformation" v-if="carInformation.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>车辆基础信息</span>
        <i class="iconfont icon-guanbi" @click="carInformation.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号码：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型:">
            <el-select v-model="person.client" placeholder="车辆类型">
              <el-option
                v-for="(item,index) in car.typeList"
                :key="index"
                :label="item"
                :value="item"
              />
              <!-- <el-option value="吸尘车" />
              <el-option value="小型机扫车" />
              <el-option value="机扫车" />
              <el-option value="洒水车" />
              <el-option value="洗路车" />
              <el-option value="高压清洗车" />
              <el-option value="除雪车" />
              <el-option value="挤压车" />
              <el-option value="垃圾车" />
              <el-option value="多功能车" />
              <el-option value="其他" />-->
            </el-select>
          </el-form-item>
          <el-form-item label="车况:">
            <el-select v-model="person.clientList" placeholder="车况">
              <el-option
                v-for="(item,index) in car.carCondition"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              记录数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 车辆基础信息列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column sortable fixed prop="ID" label="人员ID" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Dw" label="资产单位" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Cph" label="车牌号码" align="center"></el-table-column>
          <el-table-column sortable fixed prop="Model" label="车辆类型" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="当前保管人" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="购置日期" align="center" width="70"></el-table-column>
          <el-table-column sortable fixed prop="Explain" label="说明" align="center"></el-table-column>
          <el-table-column fixed prop="Usedeptname" label="使用部门" align="center" width="90"></el-table-column>
          <el-table-column sortable fixed prop="Vowner" label="机动车所有人" align="center"></el-table-column>
          <el-table-column fixed prop="Brand" label="品牌型号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vin" label="车架号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Enginenum" label="发动机号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Dischargerate" label="排气量" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Registertime" label="登记时间" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vcondition" label="车况" align="center" width="90"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'

export default {
  data () {
    return {
      trafficManger: false,
      carInformation: {
        show: false
      },
      person: {
        show: false,
        name: '',
        client: '',
        clientList: [],
        dataList: [],
        listShow: true
      },
      car: {
        show: false,
        typeList: ['', '吸尘车', '小型机扫车', '机扫车', '洒水车', '洗路车', '高压清洗车', '除雪车', '挤压车', '垃圾车', '多功能车', '其他'],
        carCondition: ['', '正常使用', '拟报废', '已报废'],
        dataList: [],
        listShow: true
      },
      //记录合集数据
      records: {
        //车检记录
        cjjlList: [],
        //车险记录
        cxjlList: [],
        //维修记录
        wxjlList: [],
        //保养记录
        byjlList: [],
        //加油记录
        jyjlList: [],
        //违章记录
        wzjlList: [],
        //违规记录
        wgjlList: [],
        //加水记录
        jsjlList: []
      },
      // 车检记录
      cjjl: {
        show: false
      },
      // 车险记录
      cxjl: {
        show: false
      },
      // 维修记录
      wxjl: {
        show: false
      },
      // 保养记录
      byjl: {
        show: false
      },
      // 加油记录
      jyjl: {
        show: false
      },
      // 违章记录
      wzjl: {
        show: false
      },
      // 违规记录
      wgjl: {
        show: false
      },
      //加水记录
      jsjl: {
        show: false
      }
    }
  },
  created () {
    eventBus.$on('closeCover', val => (this.organization.show = val))
  },
  methods: {
    carManage () {
      this.carInformation.show = true
      // eventBus.$emit('isCover', true)
      this.getCarList()
    },
    closecarManage () {
      this.carInformation.show = false
      this.car.listShow = true
    },
    // 车辆基础信息列表
    async getCarList () {
      const { data } = await this.$Http.get(`/DataListCompany/GetCarInformationListApi?ClientNo=${this.$route.query.ClientNo}`)
      this.car.dataList = data
    },
    cellMouseEnter () {

    },
    rowClick () {

    },
    editPerson () {

    },
    //打开车检记录
    opencjjl () {
      this.cjjl.show = true
    },
    //关闭车检记录
    closecjjl () {
      this.cjjl.show = false
    },
    //打开车险记录
    opencxjl () {
      this.cxjl.show = true
    },
    //关闭车险记录
    closecxjl () {
      this.cxjl.show = false
    },
    //打开维修记录
    openwxjl () {
      this.wxjl.show = true
    },
    //关闭维修记录
    closewxjl () {
      this.wxjl.show = false
    },
    //打开保养记录
    openbyjl () {
      this.byjl.show = true
    },
    //关闭保养记录
    closebyjl () {
      this.byjl.show = false
    },
    //打开加油记录
    openjyjl () {
      this.jyjl.show = true
    },
    //关闭加油记录
    closejyjl () {
      this.jyjl.show = false
    },
    //打开违章记录
    openwzjl () {
      this.wzjl.show = true
    },
    //关闭违章记录
    closewzjl () {
      this.wzjl.show = false
    },
    //打开违规记录
    openwgjl () {
      this.wgjl.show = true
    },
    //关闭违规记录
    closewgjl () {
      this.wgjl.show = false
    },
    //打开加水记录
    openjsjl () {
      this.jsjl.show = true
    },
    //关闭加水记录
    closejsjl () {
      this.jsjl.show = false
    }
  }

}
</script>

<style scoped lang='less'>
.public {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  cursor: default;
  text-align: center;
  border-right:2px solid #3BAEFA;
  & > span:hover {
    color: #3BAEFA;
  }
  .work_area_list {
    width: 220px;
    // height: 78px;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position: absolute;
    top: 15px;
    z-index: 999999;
    span:last-child{
      border-bottom: 0;
    }
    span {
      display: block;
      padding: 0 10px 0 10px;
      line-height: 26px;
      color: #333;
      border-bottom: 1px solid #2ea9fa;
      &:hover {
        color: #fff;
        background-color: #2ea9fa;
      }
    }
  }
}
.organization {
  width: 70%;
  height: 460px;
  padding: 0;
  padding-bottom: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: fixed;
  left: 50%;
  top: 130px;
  transform: translateX(-50%);
  z-index: 99;
  h2 {
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    padding-left: 10px;
    color: #666;
    span {
      margin-right: 5px;
    }
    i {
      float: right;
      margin-right: 10px;
    }
  }
  .organization_content {
    height: calc(~'100% - 33px');
  }
}
.top_box {
  height: 30px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding-left: 20px;
  .el-form {
    height: 26px;
    .el-input {
      width: 100px;
    }
    .el-select {
      width: 150px;
    }
    /deep/.el-form-item {
      vertical-align: baseline;
      .el-button /deep/ span {
        margin-left: 0;
      }
    }
  }
}
.car_content {
  //   width: 100%;
  //   height: 492px;
  height: calc(~'100% - 63px');
  overflow: auto;
  //   overflow-x: auto;
  //   overflow-y: auto;
  .new_person {
    width: 400px;
    height: 450px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 15px auto;
    box-shadow: 0 0 5px 2px #ccc;
    .icon-guanbi {
      float: right;
      margin-right: 10px;
    }
    .el-form {
      width: 260px;
      height: 180px;
      margin: 10px auto;
      background-color: #fff;
      .el-form-item {
        margin-bottom: 20px;
      }
      .btns {
        display: flex;
        align-items: center;
        justify-content: center;
        // padding-top: 10px;
        .el-button {
          margin: 0 10px;
          /deep/span {
            padding: 0 5px;
          }
        }
      }
    }
  }
}
</style>
